<!--
 * @Author: 孙丹平
 * @Date: 2021-04-06 19:28:11
 * @LastEditors: 孙丹平
 * @LastEditTime: 2021-05-05 22:42:56
 * @Description: file content
-->
<template>
  <a-input-group v-model="data">
    <a-auto-complete
      :data-source="dataSource"
      :style="{ width }"
      placeholder="请输入"
      a-input-group
      @change="change"
      @search="
        val => {
          handleChange(val)
        }
      "
    />
  </a-input-group>
</template>
<script>
import debounce from 'lodash.debounce'
export default {
  props: {
    label: {
      type: String,
      default: 'planName'
    },
    value: {
      type: [String, Number],
      default: ''
    },
    valueName: {
      type: String,
      default: 'id'
    },
    searchName: {
      type: String,
      default: 'planName'
    },
    url: {
      type: String,
      default: '/planning/page-planning'
    },
    width: {
      type: [String, Number],
      default: '180px'
    }
  },
  data() {
    return {
      objDataInfo: {},
      planName: '',
      dataSource: [],
      data: '123'
    }
  },
  computed: {
    dataq() {
      return this.value || ''
    },
    inputWidth() {
      return parseFloat(this.width) + 'px'
    }
  },
  created() {
    this.$api.plan
      .fetchList(this.url, { pageNum: 1, pageSize: 60 })
      .then(result => {
        if (result && result.list) {
          result.list.forEach(_ => {
            this.objDataInfo[_[this.label]] = _[this.valueName]
          })
          this.data = result.list[0][this.label]
        }
      })
  },
  methods: {
    change(val) {
      if (this.objDataInfo[val]) {
        this.$emit('change', this.objDataInfo[val])
        this.$emit('input', this.objDataInfo[val])
      }
    },
    async fetchInfo(planName) {
      const result = await this.$api.plan.fetchList(this.url, {
        pageNum: 1,
        pageSize: 60,
        [this.searchName]: planName
      })
      this.dataSource =
        result && result.list
          ? result.list.map(_ => {
              return _[this.label]
            })
          : []
      if (result && result.list) {
        result.list.forEach(_ => {
          this.objDataInfo[_[this.label]] = _[this.valueName]
        })
      }
      console.log(this.objDataInfo)
    },
    handleChange: debounce(function (val) {
      //  模糊查询
      this.fetchInfo(val.trim())
    }, 500)
  }
}
</script>
